<template>
  <div class="tabs">
    <!--命名路由-->
    <ul>
      <li v-for="item,index in bottomTabs" v-bind:key="index" v-on:click="onTabClicked(item,index)">
        <div style="display: flex;flex-direction: column">
          <div style="width: 100%;display: inline-block;margin-top: .2rem">
            <img :src='[item.active ? item.iconActive:item.iconNormal]' style="width: 1.5rem;height: 1.5rem"/>
          </div>
          <span v-bind:style="{color:item.active?'#42578E':'#333333'}" style="font-size: 13px">{{item.text}}</span>
        </div>
      </li>
    </ul>
  </div>
</template>
<script type="text/ecmascript-6">
  import iconOverviewNormal from '@/assets/icon/icon_bank_overview_normal.png'
  import iconOverviewActive from '@/assets/icon/icon_bank_overview_active.png'
  import iconFinanceNormal from '@/assets/icon/icon_bank_finance_normal.png'
  import iconFinanceActive from '@/assets/icon/icon_bank_finance_active.png'
  import iconProfitNormal from '@/assets/icon/icon_bank_profit_normal.png'
  import iconProfitActive from '@/assets/icon/icon_bank_profit_active.png'

  export default {
    props: ['tabs'],
    data () {
      return {
        currentIndex: 0,
        bottomTabs: [
          {
            'iconNormal': iconOverviewNormal,
            'iconActive': iconOverviewActive,
            'text': '总览',
            'active': this.currentIndex === 0
          },
          {
            'iconNormal': iconFinanceNormal,
            'iconActive': iconFinanceActive,
            'text': '财富',
            'active': this.currentIndex === 1
          },
          {
            'iconNormal': iconProfitNormal,
            'iconActive': iconProfitActive,
            'text': '权益',
            'active': this.currentIndex === 2
          }
        ]
      }
    },
    created () {
      let test = JSON.parse(window.localStorage.getItem('indexSelectedItem'))
      if (test === undefined || test.index === undefined) {
        this.currentIndex = 0
      } else {
        this.currentIndex = test.index
      }

      this.bottomTabs[this.currentIndex].active = true
      let event = {'item': this.bottomTabs[this.currentIndex], 'index': this.currentIndex}
      this.$emit('onTabClick', event)
    },
    methods: {
      onTabClicked: function (item, index) {
        this.bottomTabs[this.currentIndex].active = false
        this.bottomTabs[index].active = true
        this.currentIndex = index
        let event = {'item': item, 'index': index}
        this.$emit('onTabClick', event)
        let data = JSON.stringify({index: this.currentIndex})
        window.localStorage.setItem('indexSelectedItem', data)
      }
    }
  }
</script>
<style lang="less" type="text/less">
  .tabs {
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #fff;
    box-shadow: 4px 2px 2.5px #000;
    width: 100%;
    & > ul, & > ul > li {
      margin: 0;
      padding: 0;
    }
    ul {
      display: table;
      width: 100%;
      & > li {
        text-align: center;
        font-size: 5px;
        display: table-cell;
        padding: 0px;
        cursor: pointer;
        & > div {
          font-size: 10px;
          padding: 0px;
          & > i {
            font-size: 25px;
          }
        }
      }
    }
  }

  .icon-inner {
    font-size: 25px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    /*background: rebeccapurple;*/
    padding: 3px 0px 3px 0px;
    /*color: red;*/
  }
</style>
